<template>
  <div class="login_container">
    <van-nav-bar title="登录页面">
      <van-icon slot="left"
                name="cross"
                @click="$router.back()"></van-icon>
    </van-nav-bar>
    <van-form @submit="onSubmit"
              ref="loginRef">
      <van-field name="手机号"
                 label="手机号码："
                 type="number"
                 maxlength="11"
                 v-model="user.mobile"
                 :rules="UserRules.mobile">
        <i slot="left-icon"
           class="iconfont icon-shouji1"></i>
      </van-field>
      <van-field name="验证码"
                 label="验证码："
                 type="number"
                 maxlength="6"
                 v-model="user.code"
                 :rules="UserRules.code">
        <i slot="left-icon"
           class="iconfont icon-suo"></i>
        <template #button>
          <van-count-down v-if="showCount"
                          :time="1000 * 4"
                          format="ss s"
                          @finish="showCount = false" />
          <van-button class="sendMsg"
                      v-else
                      round
                      native-type="button"
                      @click="sendDx"
                      size="mini">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round
                    block
                    type="primary"
                    size="small"
                    native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, sendSms } from '@/api/user.js'

export default {
  name: 'LoginIndex',
  data () {
    return {
      user: {
        mobile: '13999999999',
        code: '246810'
      },
      UserRules: {
        mobile: [
          { required: true, message: '手机号码不能为空' },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: '手机号码不能为空' }
        ],
        code: [
          { required: true, message: '验证码不能为空' },
          { pattern: /^\d{6}$/, message: '验证码错误' }
        ]
      },
      showCount: false
    }
  },
  methods: {
    async onSubmit () {
      // console.log(1)
      // const user = this.user
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0
      })
      try {
        const { data } = await login(this.user)
        // console.log(data)
        this.$store.commit('setUser', data.data)
        this.$toast.success('登录成功！')
        this.$router.push('/my')
      } catch (err) {
        if (err.response.status === 400) {
          this.$toast.fail('手机号码或者验证错误')
        } else {
          this.$toast.fail('登录失败，请稍后重试！')
        }
      }
    },
    async sendDx () {
      this.showCount = true
      try {
        await this.$refs.loginRef.validate('mobile')
      } catch (err) {
        this.$toast.fail('验证失败')
      }
      try {
        await sendSms(this.user.mobile)
        this.$toast('验证码发送成功')
      } catch (err) {
        this.showCount = false
        if (err.response.status === 429) {
          this.$toast('发送过于频繁， 请稍后再点')
        } else {
          this.$toast('发送失败， 请稍后重试')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  box-shadow: 3px 5px 5px 3px rgba(0, 0, 0, 0.1);
  background-color: #40b783;
  /deep/.van-nav-bar__title {
    color: #fff;
  }
}
.van-form {
  display: block;
  background-color: #fff;
  width: 700px;
  border-radius: 13px;
  overflow: hidden;
  margin: auto;
  margin-top: 350px;
  padding: 20px 0 10px;
  box-shadow: 1px 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.van-button {
  width: 80%;
  margin: auto;
  // margin-top: 15px;
}
.sendMsg {
  background-color: #f3f3f3;
  color: #878787;
  border: none;
  width: 136px;
  padding: 0;
}
.iconfont {
  font-size: 30px;
  color: #878787;
}
.van-nav-bar .van-icon {
  color: #fff;
}
</style>
